<template>
	
	<!--vue模块组件所有内容，都放到一个跟节点里面-->
  <div id="app">
    	
    	<ul class="list_top">
    		<li v-for="item in list" @click="change(item.name)">
    			
    			{{item.name}}
    		</li>
    	</ul>
    	
    	
    	<ul class="list_bottom">
    		<li v-for="item in list" v-if="item.check">
    			
    			{{item.cnt}}
    		</li>
    	</ul>
    	
  </div>
</template>
<style>
.list_top {
	overflow: hidden;
}
	.list_top li{
		float: left;
		width:200px;
		height:40px;
		line-height: 40px;
		text-align: center;
		border:1px solid #ccc;
		margin:0 5px;
		cursor: pointer;
	}
	.list_bottom{
		position: relative;
		
	}
	.list_bottom li{
		position: absolute;
		left:0;
		top:0;
		width:830px;
		height:200px;
		border:1px solid red;
	}
</style>
<script>
export default {
  name: 'app',
  data () {//业务逻辑需要的数据
  	return{
  		
  		list:[
  			{
  				name:"tab1",
  				cnt:"11111",
  				check:true
  			},
  			{
  				name:"tab2",
  				cnt:"22222",
  				check:false
  			},
  			{
  				name:"tab3",
  				cnt:"33333",
  				check:false
  			},
  			{
  				name:"tab4",
  				cnt:"44444",
  				check:false
  			}
  		
  		]
	  		
  	}
   
  },
  methods:{
  	
  	change(key){
  		
  		for(var i=0;i<this.list.length;i++){
  			var d=this.list[i];
  			 
  			if(d.name==key){
  				d.check=true;
  			}else{
  				d.check=false;
  			}
  		}
  		
  	}
  }
}
</script>


